<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>海科集团任务监督管理系统-首页</title>
<style>
.datagrid-row, .datagrid-row-over {
	/* 	background: green; */
	
}

#center {
	/* 	width: 1200px; */
	margin: 0 auto;
}

#left {
	float: left;
}

#right {
	float: left;
	margin-left: 30px;
	margin-right: 0;
	/* 	width: 400px; */
}

.table tr {
	height: 20px;
}

.left {
	font-weight: bold;
}
</style>
<script src="resourse/js/echarts.min.js"></script>
</head>
<body>
	<%@ include file="TaskHeader.jsp"%>
	<script>
		$(document).ready(function() {
			$("#statis a .out").stop().animate({
				'top' : '48px'
			}, 300); // move down - hide
			$("#statis a .over").stop().animate({
				'top' : '0px'
			}, 300); // move down - show
		});
	</script>
	<div id="center">
		<div style="margin: 20px 0;">
			<input type="hidden" id="currentyear" value="${currentyear}" /> <input
				type="hidden" id="currentweek" value="${currentweek}" />
		</div>
		<div>
			<a href="javascript:void(0)" id="run" class="easyui-linkbutton"
				onclick="bindgridall('0')">正常进行</a>&nbsp;<a
				href="javascript:void(0)" id="over" class="easyui-linkbutton"
				onclick="bindgridall('1')">已超期</a>&nbsp;<a href="javascript:void(0)"
				id="close" class="easyui-linkbutton" onclick="bindgridall('2')">已完成</a>&nbsp;<a
				href="javascript:void(0)" id="percent" class="easyui-linkbutton"
				onclick="openPercent()">督办完成率</a>
		</div>
		<table>
			<tr>
				<td>
					<div id="left">
						<table class="easyui-datagrid" id="ttall">
						</table>
					</div>
				</td>
			</tr>
		</table>
		<div id="dlgMeet" class="easyui-dialog"
			style="width: 700px; height: 500px;"
			data-options="closed:true,modal:true,border:'thin'">
			<div id="main" style="width: 600px; height: 400px;"></div>
		</div>
	</div>
	<script type="text/javascript">
		function initchart(chartdata) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				color : [ "#3398DB", "rgb(127,255,170)" ],
				title : {
					text : ''
				},
				tooltip : {},
				legend : {
					data : [ '督办完成率' ]
				},
				xAxis : {
					data : chartdata.lable,
					type : "category",
					axisLabel : {
						interval : 0,
						rotate : 40
					}
				},
				yAxis : [ {
					type : "value",
					name : "完成率",
					min : 0,
					max : 100,
					interval : 20,
					axisLabel : {
						formatter : "{value}%"
					}
				} ],
				series : [ {
					name : '督办完成率',
					type : 'bar',
					data : chartdata.value,
					tooltip : {
						formatter : function(params, ticket, callback) {
							//x轴名称
							var name = params.name;
							//图表title名称
							var seriesName = params.seriesName;
							//值
							var value = params.value;
							var valueFliter = value["完成率"];
							return seriesName + "<br />" + name + "：" + value
									+ "%";
						}
					}
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		function openPercent() {
			$('#dlgMeet').dialog('open').dialog('center').dialog('setTitle',
					'督办完成率');
			getChartData();
		}
		function getChartData() {
			$.ajax({
				type : "post",
				url : "statis/getRate",
				data : {},
				success : function(data) {
					console.log(data);
					initchart(eval(data));
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					$.messager.alert('消息', errorThrown);
				}
			});
		}
	</script>
	<script>
		//获取当前时间，格式YYYY-MM-DD
		function getNowFormatDate() {
			var date = new Date();
			var seperator1 = "-";
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = year + seperator1 + month + seperator1 + strDate;
			return currentdate;
		}
	</script>

	<script>
		$(function() {
			bindgridall('0');
			$('#center').width($(window).width() - 50);

		})

		function bindgridall(a) {
			$('#run').css("opacity", "0.3");
			$('#over').css("opacity", "0.3");
			$('#close').css("opacity", "0.3");
			if (a == '0') {
				$('#run').css("opacity", "1");
			} else if (a == '1') {
				$('#over').css("opacity", "1");
			} else if (a == '2') {
				$('#close').css("opacity", "1");
			}
			$('#ttall')
					.datagrid(
							{
								title : '本周督办',
								nowrap : false,
								rownumbers : true,
								singleSelect : true,
								collapsible : true,
								width : $(window).width() - 100,
								pagination : true,
								height : 500,
								rownumbers : true,
								url : 'statis/selectStatistask',
								queryParams : {
									flag : a
								},
								columns : [ [
										{
											field : 'INF_METTINGNAME',
											title : '会议名称',
											width : '20%',
											formatter : function(val, rec) {
												var complete = val;
												if (rec.PROR_COMMITTIME != null) {
													complete = val
															+ '<img src="resourse/img/BDNew_wev8.png"/>'
												}
												var str = '<a target="_blank" href="SurpviseManage/surpviseView?inf_id='
														+ rec.INF_ID
														+ '&year='
														+ $('#currentyear')
																.val()
														+ '&week='
														+ $('#currentweek')
																.val()
														+ '">'
														+ complete + '</a>';
												return str;
											}
										},
										{
											field : 'PRO_CONTENT',
											title : '督办事项',
											width : '30%',
											formatter : function(val, rec) {
												var str = '<a target="_blank" href="task/taskList?proId='
													+ rec.PRO_ID												
													+ '">'
													+ val + '</a>';
											return str;
												return val;
											}
										},
										{
											field : 'PRO_COEE',
											title : '整体进度',
											// 											width : 70,
											formatter : function(val, rec) {
												if (val == null) {
													val = 0;
												}
												var tempval = val;
												var htmlstr = '';
												var flag = false;
												//判断是否超期
												if (rec.PRO_VALIDATETIME == null
														&& rec.PRO_PLANFINISHDATE < getNowFormatDate()) {
													flag = true;//当没有完成时间时，与当前时间比较
												}
												if (rec.PRO_VALIDATETIME != null
														&& rec.PRO_PLANFINISHDATE < rec.PRO_VALIDATETIME
																.substr(0, 10)) {
													flag = true;//当有完成时间时，与完成时间比较
												}
												if (rec.PRO_PLANFINISHDATE == null
														|| rec.PRO_PLANFINISHDATE == "") {
													flag = false;
												}
												if (flag) {
													htmlstr = '<div class="easyui-progressbar progressbar" style="width: 60px;font-weight:bold; " value="'
															+ tempval
															+ '" text="'
															+ tempval
															+ '%">'
															+ '<div class="progressbar-text" style="width: 60px; height: 20px; line-height: 20px;font-weight:bold;color:red; ">'
															+ tempval
															+ '%</div>'
															+ '<div class="progressbar-value" style="width: '
															+ tempval
															+ '%; height: 20px; line-height: 20px; color:red;font-weight:bold;">'
															+ '<div class="progressbar-text" style="width: 60px; height: 20px; line-height: 20px;font-weight:bold;color:red;">'
															+ tempval
															+ '%</div>'
															+ '</div>'
															+ '</div>';
												} else {
													htmlstr = '<div class="easyui-progressbar progressbar" style="width: 60px; " value="'
															+ tempval
															+ '" text="'
															+ tempval
															+ '%">'
															+ '<div class="progressbar-text" style="width: 60px; height: 20px; line-height: 20px;">'
															+ tempval
															+ '%</div>'
															+ '<div class="progressbar-value" style="width: '
															+ tempval
															+ '%; height: 20px; line-height: 20px;">'
															+ '<div class="progressbar-text" style="width: 60px; height: 20px; line-height: 20px;">'
															+ tempval
															+ '%</div>'
															+ '</div>'
															+ '</div>';
												}
												return htmlstr;
											}
										},
										{
											field : 'PROR_CONTENT',
											title : '本周工作',
											width : '20%',
											formatter : function(val, rec) {
												return val;
											}
										},
										{
											field : 'PRO_PLANFINISHDATE',
											title : '计划完成时间',
											width : 90,
											formatter : function(val, rec) {
												if (val != null) {
													return (val + '').substr(0,
															10);
												} else {
													return val;
												}
											}
										},
										{
											field : 'PRO_VALIDATETIME',
											title : '完成时间',
											width : 90,
											formatter : function(val, rec) {
												if (val != null) {
													return (val + '').substr(0,
															10);
												} else {
													return val;
												}
											}
										}, {
											field : 'PRO_EXECUTEUSERNAME',
											title : '执行人',
											// 											width : 40,
											formatter : function(val, rec) {
												return val;
											}
										} ] ],
								rowStyler : function(index, row) {
									if (row.PROR_COMMITTIME == null) {
										// 										return 'background-color:#f6ffc0;color:blue;font-weight:bold;';
									} else {
										// 										return 'background-color:#17f709;color:blue;font-weight:bold;';
									}
								},
								onLoadSuccess : onLoadSuccess
							});
		}

		function onLoadSuccess(data) {

		}
	</script>
</body>
</html>